<div class="page-title">
    <img src="svg_img/sms_black.svg">
    <h1><span data-trans="sms"></span> <span id="smsCapability"></span></h1>
</div>
<div id="innerContainer">
    <div class="table-container">
        <script type="text/x-jquery-tmpl" id="smsMeTmpl">
            <div id="talk-item-${id}" class="talk-item talk-b">
                <div class="layout grid-talk">
                    <div class="col-main">
                        <div class="info-talk">
                            {{if tag == 3}}
                            <div class="msg_container msg_fail">
                                <s class="arrow"></s>
                                <div class="J_content"><pre>{{html dealContent(content, id)}}</pre></div>
                            </div>
                            {{else}}
                            <div class="msg_container msg">
                                <s class="arrow"></s>
                                <div class="J_content"><pre>{{html dealContent(content, id)}}</pre></div>
                            </div>
                            {{/if}}
                            <div class="time padding-top-10">
                                <div class="smslist-item-time pull-right paddingTop4 padding-right-10">${time}</div>
                                <div class="hiddenButton">
                                    <div class="smslist-item-repeat cursorhand pull-right marginRight6 padding-right-10" onclick="forwardClickHandler('${id}')">
                                      <span class="sms-forward-icon padding-right-10"></span>
                                    </div>
                                    <div class="smslist-item-delete padding-right-10 pull-right cursorhand  marginRight6" target="${number}" onclick="deleteSingleItemClickHandler('${id}')">
                                        <span class="trash-icon cursorhand  padding-right-10"></span>
                                    </div>
                                </div>
                                {{if tag == 3}}
                                <div class="smslist-item-resend cursorhand pull-right marginRight6" target="${target}" onclick="resendClickHandler('${id}')">
                                    <span class="sms-resend-icon cursorhand padding-right-10 marginbottom5"></span>
                                </div>
                                {{/if}}
                                <div class="pull-right marginRight6 paddingTop4 error padding-right-10">${errorText}</div>
                                {{if targetName}}
                                <div class="pull-right marginRight6 paddingTop4 padding-right-10"><span data-trans="sms_to"></span> ${targetName}</div>
                                {{/if}}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </script>
        <script type="text/x-jquery-tmpl" id="smsOtherTmpl">
        <div id="talk-item-${id}" class="talk-item talk-a">
            <div class="layout grid-talkf">
                <div class="col-main">
                    <div class="info-talk">
                        <div class="msg_container msg">
                            <s class="arrow"></s>
                            <div class="J_content"><pre>{{html dealContent(content)}}</pre></div>
                        </div>
                        <div class="time padding-top-10">
                            <div class="smslist-item-time pull-left paddingleft10 marginRight6 paddingTop4">${time}</div>
                            
<div class="hiddenButton">
  <div class="smslist-item-repeat paddingleft10 cursorhand pull-left" onclick="forwardClickHandler('${id}')">
    <span class="sms-forward-icon pull-left paddingleft10"></span>
  </div>
  <div class="smslist-item-delete cursorhand pull-left  marginRight6" target="${number}" onclick="deleteSingleItemClickHandler('${id}')">
    <span class="trash-icon smslist-item-delete cursorhand"></span>
  </div>
</div>
                            <div class="pull-left paddingTop4 error">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        </script>
        <script type="text/x-jquery-tmpl" id="addPhonebookTmpl">
        <div class="tagPopup">
            <div id="innerTagPopup" class="popup tag-popup">
                <div class="popup-wrapper">
                    <p class="tag-popup-close">
                        <a href="javascript:hidePopup();"></a>
                    </p>
                    <form id="quickSaveContactForm">
                        <p><span data-trans="name"></span><i class='text-danger'>&nbsp;*</i></p><p><input type="text" name="name" id="name" value="" maxlength="22" class="required"/></p>
                        <p><span data-trans="send_numbers"></span><i class='text-danger'>&nbsp;*</i></p><p><input type="text" name="number" id="number" value="${number}" maxlength="40" class="required"/></p>
                        <p class="text-right"><input type="submit" class="btn btn-primary" data-trans="save"/></p>
                    </form>
                </div>
            </div>
        </div>
        </script>
        <div id="smsChatRoom">
            <div id="chosenUser">
                <div id="chosenUserList">
                    <select id="chosenUserSelect" multiple class="chzn-select-deselect"></select>
        
                </div>
            </div>
            <h4 id="chosenUser1" class="hide"></h4>
            <div id="chatpanel">
                <div class="clear-container">
                    <div id="chatlist">
                        
                    </div>
                </div>
            </div>
<div id="inputpanel" class="mt-3">
    <div class="chatform">
      <div class="chattextinput">
        <textarea id="chat-input" data-trans="chat_input_placehoder" class="form-control"></textarea>
      </div>
      <div class="chatfun row mt-3">
        <div id="toolbar" class="ext col-8">
          <span><em id="inputcount">(0/765)</em> <em id="inputItemCount">(1/5)</em></span>
          <span class="error" id="sendSmsErrorLi" data-action="sendimage"></span>
        </div>
        <div class="col-md-4 text-right">
          <span><input id="btn-send" type="button" class="btn btn-primary" onclick="sendSmsClickHandler()" data-trans="send"/></span>
          <span><input id="btn-back" type="button" class="btn btn-primary back-btn" onclick="chatCancelClickHandler()" data-trans="back"/></span>
        </div>
      </div>
    </div>
  </div>
        </div>
        <script type="text/x-jquery-tmpl" id="smsTableTmpl">
        {{each(i, sms) data }}
            <tr class="smslist-item ${!hasDraft && newCount > 0 ? 'font-weight-bold':''}" {{if hasDraft && groupId != ''}}id="smslist-item-${groupId}"{{else}}id="smslist-item-${itemId}"{{/if}}>
                <td>
                    <div class="smslist-item-checkbox">
                        <input type="checkbox" class="form-check-input" target="smslist-checkAll" name="smsid" id="checkbox${id}" value="${id}" groupid="${groupId}" number="${number}"/>
                    </div>
                </td>
                <td {{if hasDraft && groupId != ''}} onclick="draftSmsItemClickHandler('${groupId}')" {{else}} onclick="smsItemClickHandler('${number}')"{{/if}} dir='ltr'>
                    {{if hasDraft && groupId != ''}}
                        <div class="smslist-item-name" title="${draftShowNameTitle}">
                            <div class="smslist-item-name-draftShowName">${draftShowName}</div>
                            <span class="smslist-item-total-count">(${totalCount})</span>
                        </div>
                    {{else}}
                        {{if name.length == 0}}
                            {{if number.length > 15}}
                                <span class="smslist-item-name2">${number.substring(0,15)+"..."}</span> <span id="listNumber${itemId}" class="sms-add-contact-icon cursorhand" onclick="openPhoneBook(null, '${number}')"></span>
                            {{else}}
                                <span class="smslist-item-name2">${number}</span> <span id="listNumber${itemId}" class="sms-add-contact-icon cursorhand" onclick="openPhoneBook(null, '${number}')"></span>
                            {{/if}}
                        {{else}}
                            <span class="smslist-item-name2">${name}</span>
                        {{/if}}
                        <span class="smslist-item-total-count">(${totalCount})</span>
                    {{/if}}
                </td>
                <td class="cursorhand" {{if hasDraft && groupId != ''}}onclick="draftSmsItemClickHandler('${groupId}')" title='${content}'{{else}}onclick="smsItemClickHandler('${number}')" title='${latestSms}'{{/if}}">
                    {{if hasDraft && groupId != ''}}
                        <div class="sms-table-content smslist-item-msg"><span class="smslist-item-draft-flag colorRed" data-trans="draft"></span>: ${content}</div>
                    {{else}}
                        <div class="sms-table-content smslist-item-msg">{{if hasDraft}}<span class="smslist-item-draft-flag colorRed" data-trans="draft"></span>: {{/if}}${latestSms}</div>
                    {{/if}}
                </td>
                <td class="text-center"><span class="clock-time">${latestTime}</span></td>
            </tr>
        {{/each}}
        </script>
        <script type="text/x-jquery-tmpl" id="smsListTmpl">
            {{each(i, sms) data }}
                {{if hasDraft && groupId != ''}}
                <div class="height115 width100p smslist-item" id="smslist-item-${groupId}">
                    <table class="width100p height100p">
                        <tbody>
                        <tr>
                            <td class="vMiddle width20">
                                <div class="smslist-item-checkbox">
                                    <input type="checkbox" target="smslist-checkAll" name="smsid" id="checkbox${id}" value="${id}" groupid="${groupId}" />
                                </div>
                            </td>
                            <td  style="width:823px;">
                                <table width="100%">
                                    <tr>
                                        <td style="width:740px;">
                                            <div class="smslist-item-name  side-left txtBold  cursorhand" onclick="draftSmsItemClickHandler('${groupId}')" title="${draftShowNameTitle}">
                                                <div class="smslist-item-name-draftShowName"><span>${draftShowName}</span></div>
                                                <div class="smslist-item-total-count smslist-item-total-count-style">(${totalCount})</div>
                                            </div>
                                        </td>
                                        <td><div class="smslist-item-draft-flag pull-right padding-right-10  text-right text-danger" data-trans="draft"></div></td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                        <tr class="margin-top-10">
                            <td class="vMiddle width20">&nbsp;</td>
                            <td class="font10px lh20px" onclick="draftSmsItemClickHandler('${groupId}')">
                                <div class="smslist-item-msg cursorhand">
                                    <pre class="lh20px">${content}</pre>
                                </div>
                            </td>
                        </tr>
                        <tr class="margin-top-10">
                            <td class="vMiddle width20">&nbsp;</td>
                            <td class="height30 clock-time">
                                <div class="margin-top-10 height30 pull-left margin-right-5">
                                    <span class="clock-icon pull-left margin-right-5"></span>
                                    <span class="clock-time">${latestTime}</span>
                                </div>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                {{else}}
                <div class="height115 width100p smslist-item" id="smslist-item-${itemId}">
                    <table class="width100p height100p">
                        <tbody>
                            <tr>
                                <td class="vMiddle width20">
                                    <div class="smslist-item-checkbox">
                                        <input type="checkbox" target="smslist-checkAll" name="smsid" id="checkbox${id}" value="${id}" number="${number}" ${checked?"checked=checked":""} />
                                    </div>
                                </td>
                                <td>
                                    {{if name.length == 0}}
                                    <div class="smslist-item-name pull-left txtBold cursorhand" onclick="smsItemClickHandler('${number}')"><span>${number}</span></div>
                                    <div style="float:left;" class="smslist-item-total-count pull-left txtBold" onclick="smsItemClickHandler('${number}')">(${totalCount})</div>
                                    <div class="pull-left cursorhand padding-top-10" id="listNumber${itemId}" style="line-height: 35px; width:30px;"><span class="sms-add-contact-icon" onclick="openPhoneBook(null, '${number}')"></span></div>
                                    <div class="smslist-item-new-count cursorhand pull-right ${newCount > 0?'':'hide'}" onclick="smsItemClickHandler('${number}')"><span>${newCount}</span></div>
                                    {{else}}
                                    <div class="smslist-item-name pull-left txtBold cursorhand" onclick="smsItemClickHandler('${number}')"><span>${name}/${number}</span></div><div class="smslist-item-total-count pull-left txtBold" onclick="smsItemClickHandler('${number}')">(${totalCount})</div><div class="smslist-item-new-count cursorhand pull-right ${newCount > 0?'':'hide'}" onclick="smsItemClickHandler('${number}')"><span>${newCount}</span></div>
                                    {{/if}}
                                    <div class="smslist-item-draft-flag padding-right-10 pull-right text-danger ${hasDraft?'':'hide'}"><span data-trans="draft"></span></div>
                                </td>
                            </tr>
                            <tr class="margin-top-10">
                                <td class="vMiddle width20">&nbsp;</td>
                                <td class="font10px lh20px" onclick="smsItemClickHandler('${number}')">
                                    <div class="smslist-item-msg cursorhand">
                                        <pre class="lh20px ${newCount > 0?'txtBold':''}">${latestSms}</pre>
                                    </div>
                                </td>
                            </tr>
                            <tr class="margin-top-10">
                                <td class="vMiddle width20">&nbsp;</td>
                                <td class="height30 clock-time">
                                    <div class="smslist-item-repeat margin-top-10 cursorhand pull-left marginright30" style="display:none;">
                                      <span class="sms-forward-icon pull-left" onclick="forwardClickHandler(${latestId})"></span>
                                    </div>
                                    <div class="smslist-item-delete margin-top-10 height30 cursorhand pull-left marginright30"  style="display:none;">
                                        <span class="trash-icon pull-left" onclick="deletePhoneMessageClickHandler('${number}')"></span>
                                    </div>
                                    <div class="margin-top-10 height30 pull-left margin-right-5">
                                        <span class="clock-icon pull-left margin-right-5"></span>
                                        <span class="clock-time">${latestTime}</span>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                {{/if}}
            {{/each}}
        </script>
        <div id="smslist-main">
            <form id="smsListForm">
<div class="smslist-btns">
    <div class="row">
      <div class="col-md-9">
        <div class="margin-left-10">
          <input type="button" id="smslist-new-sms" onclick="newMessageClickHandler()" class="btn btn-primary mb-3" data-trans="new"/>
          <input type="button" id="smslist-delete" onclick="deleteSelectClickHandler()" class="btn btn-primary mb-3 disabled" disabled="disabled" data-trans="delete"/>
          <input style="display: none;" type="button" id="smslist-delete-all" onclick="deleteAllClickHandler()" class="btn  disabled marginright10" disabled="disabled" data-trans="delete_all"/>
          <input type="button" id="smslist-refresh" onclick="refreshClickHandler()" class="btn btn-primary mb-3" data-trans="refresh"/>
          <a href="#sms_setting" id="smslist-setting" class="btn btn-primary mb-3" data-trans="setting"></a>
        </div>
      </div>
      <div class="col-md-3 text-right mb-3 hide">
        <select class="form-control form-select" onchange="smsUtil.changeLocationHandler(this);">
          <option data-trans="smslist" value="device" selected="selected"></option>
          <option data-trans="sim_messages" value="sim"></option>
        </select>
      </div>
    </div>
  </div>
                <div class="ko-grid-container table-responsive" id="addPhonebookContainer" style="position: relative;">
                    <div class="jspContainer width100p height100p" id="smslist_container"></div>
                    <table class="table table-striped table-hover ko-grid table-fixed">
                        <thead>
                        <tr>
                            <th width="20" class="text-center">
                                <input class="form-check-input" type="checkbox" id="checkbox-all"/>
                            </th>
                            <th width="250" data-trans="phone_number" ></th>
                            <th data-trans="content" class="text-center"></th>
                            <th width="250" data-trans="time" class="text-center"></th>
                        </tr>
                        </thead>
                        <tbody id="smslist-table">
                        </tbody>
                    </table>
                </div>
            </form>
        </div>
    </div>
</div>
